<template>
	<view class="pages">
		<!-- 商品图片轮播 -->
		<view class="swiper-container" v-if="images.length > 0">
			<swiper class="swiper" :circular="images.length > 1" :indicator-dots="false" 
				:autoplay="images.length > 1" interval="5000" 
				:style="'height:' + swiperHeight + 'px'"
				@change="onSwiperChange">
				<swiper-item v-for="(item, index) in images" :key="index">
					<view class="swiper-item-box">
						<image 
							:src="getimg(item)" 
							class="swiper-image"
							mode="aspectFill"
							@load="onImageLoad"
						/>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 自定义指示器 -->
			<view class="custom-indicator" v-if="images.length > 1">
				<view class="indicator-dots">
					<view 
						v-for="(item, index) in images" 
						:key="index"
						class="dot"
						:class="{ 'dot-active': currentIndex === index }"
					></view>
				</view>
				<view class="indicator-counter">
					<text class="counter-text">{{ currentIndex + 1 }} / {{ images.length }}</text>
				</view>
			</view>
		</view>
		
		<!-- 无图片占位 -->
		<view class="no-image" v-else :style="'height:' + swiperHeight + 'px'">
			<view class="no-image-content">
				<uni-icons type="image" size="80" color="#cccccc"></uni-icons>
				<text class="no-image-text">暂无商品图片</text>
			</view>
		</view>

		<!-- 分享赚奖励提示卡片 -->
		<view class="share-reward-card animate__animated animate__fadeInUp">
			<view class="reward-icon-box">
				<uni-icons type="gift-filled" size="32" color="#FF6B6B"></uni-icons>
			</view>
			<view class="reward-content">
				<text class="reward-title">分享赚奖励</text>
				<text class="reward-desc">分享给好友购买，即可获得丰厚奖励</text>
			</view>
			<button open-type="share" catchtap="emptyFunction" 
					:data-id="goodsId" 
					:data-title="goodsDetail.title"
					:data-img="images.length > 0 ? images[0] : ''" 
					class="share-tag animated-button premium-button share-btn"
					@click="shareProduct">
				<uni-icons type="redo" size="20" color="#ffffff"></uni-icons>
				<text class="commission-text" v-if="goodsDetail.commission">佣金¥{{ goodsDetail.commission }}</text>
				<text class="share-btn-text" v-else>立即分享</text>
			</button>
		</view>

		<!-- 商品价格 -->
		<view class="price-section animate__animated animate__fadeInUp animate__delay-0.1s">
			<view class="price-main">
				<view class="price-current">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ goodsDetail.s_price }}</text>
					<text class="price-unit" v-if="goodsDetail.unit">/{{ goodsDetail.unit }}</text>
				</view>
				<view class="price-original" v-if="goodsDetail.ys_price">
					<text class="original-price">原价：¥{{ goodsDetail.ys_price }}</text>
					<view class="discount-badge" v-if="goodsDetail.ys_price > goodsDetail.s_price">
						<text class="discount-text">{{ ((goodsDetail.s_price / goodsDetail.ys_price) * 10).toFixed(1) }}折</text>
					</view>
				</view>
			</view>
			<view class="sales-info">
				<text class="sales-text">已售{{ goodsDetail.sales || 0 }}件</text>
			</view>
		</view>

		<!-- 商品标题 -->
		<view class="goods-title-section animate__animated animate__fadeInUp animate__delay-0.2s">
			<text class="goods-title">{{ goodsDetail.title }}</text>
		</view>

		<!-- 商品规格 -->
		<view class="goods-spec-section animate__animated animate__fadeInUp animate__delay-0.3s" v-if="goodsDetail.guige">
			<view class="spec-row">
				<text class="spec-label">规格：</text>
				<text class="spec-value">{{ goodsDetail.guige }}</text>
			</view>
		</view>

		<!-- 数量选择 -->
		<view class="quantity-section animate__animated animate__fadeInUp animate__delay-0.4s">
			<view class="quantity-label">
				<text class="label-text">购买数量</text>
			</view>
			<view class="quantity-control">
				<view class="quantity-btn" :class="{disabled: quantity <= 1}" @click="decreaseQuantity">
					<uni-icons type="minus" size="16" :color="quantity <= 1 ? '#cccccc' : '#666666'"></uni-icons>
				</view>
				<view class="quantity-input">
					<text class="quantity-value">{{ quantity }}</text>
				</view>
				<view class="quantity-btn" @click="increaseQuantity">
					<uni-icons type="plus" size="16" color="#666666"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 服务保障 -->
		<view class="service-section animate__animated animate__fadeInUp animate__delay-0.5s">
			<view class="service-item">
				<uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
				<text class="service-text">七天无理由</text>
			</view>
			<view class="service-item">
				<uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
				<text class="service-text">品质保证</text>
			</view>
			<view class="service-item">
				<uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
				<text class="service-text">限时包邮</text>
			</view>
		</view>
		
		<view class="detail-section animate__animated animate__fadeInUp animate__delay-0.6s">
			<view class="section-title">
				<text class="title-text">描述</text>
			</view>
			<view class="detail-content">
				<rich-text :nodes="formatRichText(goodsDetail.info)"></rich-text>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail-section animate__animated animate__fadeInUp animate__delay-0.7s" v-if="goodsDetail.content">
			<view class="section-title">
				<text class="title-text">商品详情</text>
			</view>
			<view class="detail-content">
				<rich-text :nodes="formatRichText(goodsDetail.content)"></rich-text>
			</view>
		</view>

		<!-- 占位 -->
		<view style="height: 120rpx;"></view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar animate__animated animate__fadeInUp animate__delay-0.8s">
			<view class="action-btns">
				<button open-type="share" catchtap="emptyFunction" 
						:data-id="goodsId" 
						:data-title="goodsDetail.title"
						:data-img="images.length > 0 ? images[0] : ''" 
						class="share-tag animated-button premium-button btn-share"
						@click="shareProduct">
					<uni-icons type="redo" size="20" color="#ffffff"></uni-icons>
					<text class="btn-text">分享赚钱</text>
				</button>
				<view class="btn-buy" @click="buyNow">
					<uni-icons type="cart-filled" size="20" color="#ffffff"></uni-icons>
					<text class="btn-text">立即购买</text>
				</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<view class="popup-title">分享商品</view>
				<view class="share-tips">
					<uni-icons type="info" size="18" color="#FF6B6B"></uni-icons>
					<text class="tips-text">好友通过您的分享购买后，您将获得奖励</text>
				</view>
				<view class="share-link-box">
					<text class="link-label">分享链接：</text>
					<text class="link-text">{{ shareLink }}</text>
					<view class="copy-btn" @click="copyLink">
						<text class="copy-text">复制</text>
					</view>
				</view>
				<view class="close-btn" @click="closeSharePopup">
					<text class="close-text">关闭</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import $util from "@/util/util.js"

export default {
	data() {
		return {
			goodsId: '',
			goodsDetail: {},
			images: [],
			swiperHeight: 375,
			shareLink: '',
			userId: '',
			currentIndex: 0, // 当前轮播图索引
			quantity: 1 // 购买数量
		}
	},
	
	onLoad(options) {
		this.goodsId = options.id || options.shopid
		this.swiperHeight = uni.getSystemInfoSync().windowWidth
		
		// 处理分享链接中的userid，保存到本地存储
		if (options.userid) {
			// 保存分享者的userid，用于后续注册或绑定推荐关系
			uni.setStorageSync('invite_userid', options.userid)
			uni.setStorageSync('invite_goodsid', this.goodsId)
			console.log('保存推荐人ID:', options.userid, '商品ID:', this.goodsId)
		}
		
		this.getUserId()
		this.getGoodsDetail()
		
		// 如果用户已登录，检查并绑定推荐关系
		if ($util.isLogin()) {
			this.bindInviteRelation()
		}
	},
	
	// 分享配置
	onShareAppMessage(res) {
		console.log(res)
		if (res.from === 'button') {
			// 获取按钮上设置的 data-* 属性
			const dataset = res.target.dataset
		
			let imgUrl = this.getimg(dataset.img)
			return {
				title: dataset.title,
				path: '/pages/memberinfo/sharelist/sharedetail?id=' + dataset.id + '&userid=' + this.userId,
				imageUrl: imgUrl
			}
		}
		
		// 默认分享
		return {
			title: this.goodsDetail.title || '新品推荐',
			path: `/pages/memberinfo/sharelist/sharedetail?id=${this.goodsId}&userid=${this.userId}`,
			imageUrl: this.images.length > 0 ? this.getimg(this.images[0]) : ''
		}
	},
	
	onShareTimeline() {
		return {
			title: this.goodsDetail.title || '新品推荐',
			query: `id=${this.goodsId}&userid=${this.userId}`,
			imageUrl: this.images.length > 0 ? this.getimg(this.images[0]) : ''
		}
	},
	
	methods: {
		// 获取用户ID
		getUserId() {
			let userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				try {
					let user = JSON.parse(userInfo)
					this.userId = user.id || ''
				} catch (e) {
					console.log('解析用户信息失败', e)
				}
			}
		},
		
		// 绑定推荐关系
		bindInviteRelation() {
			const inviteUserId = uni.getStorageSync('invite_userid')
			const inviteGoodsId = uni.getStorageSync('invite_goodsid')
			
			// 如果有推荐人ID且不是自己分享的
			if (inviteUserId && inviteUserId !== this.userId) {
				// 调用后端接口绑定推荐关系
				$util.ajax({
					url: 'member/bind_invite', // 后端需要提供这个接口
					invite_userid: inviteUserId,
					goods_id: inviteGoodsId || this.goodsId
				}, (res) => {
					if (res.code == 1) {
						console.log('推荐关系绑定成功')
						// 绑定成功后清除本地存储
						uni.removeStorageSync('invite_userid')
						uni.removeStorageSync('invite_goodsid')
					} else {
						console.log('推荐关系绑定失败:', res.msg)
					}
				}, (err) => {
					console.log('推荐关系绑定请求失败:', err)
				})
			}
		},
		
		// 获取商品详情
		getGoodsDetail() {
			$util.showProgress()
			$util.ajax({
				url: 'mall/get_detail',
				id: this.goodsId
			}, (res) => {
				$util.hideProgress()
				if (res.code == 1) {
					this.goodsDetail = res.data
					// 处理图片数组
					if (res.data.images) {
						// 如果是字符串，按逗号分割
						if (typeof res.data.images === 'string' && res.data.images.trim()) {
							this.images = res.data.images.split(',').filter(img => img && img.trim())
						} else if (Array.isArray(res.data.images) && res.data.images.length > 0) {
							// 如果已经是数组，直接使用
							this.images = res.data.images.filter(img => img)
						} else {
							this.images = []
						}
					} else if (res.data.image) {
						// 单张图片
						if (typeof res.data.image === 'string' && res.data.image.trim()) {
							this.images = [res.data.image]
						} else {
							this.images = []
						}
					} else {
						// 没有图片
						this.images = []
					}
					
					// 生成分享链接
					this.generateShareLink()
				} else {
					$util.toast(res.msg || '获取商品详情失败')
				}
			})
		},
		
		// 生成分享链接
		generateShareLink() {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			this.shareLink = `pages/${currentPage.route}?id=${this.goodsId}&userid=${this.userId}`
		},
		
		// 分享商品
		shareProduct() {
			// 检查登录
			if (!$util.isLogin()) {
				$util.login()
				return
			}
			
			// 小程序环境直接调用分享
			// #ifdef MP
			uni.showShareMenu({
				withShareTicket: true,
				success: () => {
					$util.toast('请点击右上角分享')
				}
			})
			// #endif
			
			// 非小程序环境显示分享弹窗
			// #ifndef MP
			this.$refs.sharePopup.open()
			// #endif
		},
		
		// 复制链接
		copyLink() {
			uni.setClipboardData({
				data: this.shareLink,
				success: () => {
					$util.toast('链接已复制')
					this.closeSharePopup()
				}
			})
		},
		
		// 关闭分享弹窗
		closeSharePopup() {
			this.$refs.sharePopup.close()
		},
					
		// 空函数，用于阻止按钮默认行为
		emptyFunction() {
			// 空事件，用于阻止冒泡
			console.log('空事件，用于阻止冒泡')
		},
		
		// 立即购买
		buyNow() {
			// 检查登录
			if (!$util.isLogin()) {
				$util.login()
				return
			}
			
			// 跳转到购买页，携带购买数量和分享者ID
			let url = `/pages/memberinfo/sharelist/buynow?id=${this.goodsId}&num=${this.quantity}`
			
			// 如果有推荐人id，也一并传递
			const inviteUserId = uni.getStorageSync('invite_userid')
			if (inviteUserId) {
				url += `&shareUserId=${inviteUserId}`
			}
			
			$util.openwin(url)
		},
		
		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--
			}
		},
		
		// 增加数量
		increaseQuantity() {
			this.quantity++
		},
		

		
		// 轮播图变化
		onSwiperChange(e) {
			this.currentIndex = e.detail.current
		},
		
		// 图片加载完成
		onImageLoad() {
			console.log('图片加载完成')
		},
		
		// 格式化富文本
		formatRichText(html) {
			if (!html) return ''
			html = String(html)
			
			// 清理异常的属性（没有属性名的style）
			html = html.replace(/\s+="[^"]*"/gi, '')
			
			// 为img标签添加响应式样式
			html = html.replace(/<img([^>]*?)\s*\/?>|<img([^>]*?)>/gi, (match, group1, group2) => {
				const attrs = group1 || group2 || ''
				// 删除原有style属性
				const cleanAttrs = attrs.replace(/\s*style\s*=\s*"[^"]*"/gi, '').replace(/\s*style\s*=\s*'[^']*'/gi, '')
				return `<img${cleanAttrs} style="max-width:100%;height:auto;display:block;"/>`
			})
			
			return html
		},
		
		// 获取图片
		getimg(path) {
			return $util.get_img(path)
		}
	}
}
</script>

<style scoped>
.pages {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(180deg, #f9f9f9 0%, #f0f0f0 100%);
}

/* 轮播图 */
.swiper-container {
	width: 100%;
	position: relative;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.swiper {
	width: 100%;
}

.swiper-item-box {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.swiper-image {
	width: 100%;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-image:active {
	transform: scale(1.02);
}

/* 自定义指示器 */
.custom-indicator {
	position: absolute;
	bottom: 30rpx;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

.indicator-dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 12rpx;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	margin: 0 6rpx;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot-active {
	width: 32rpx;
	border-radius: 6rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

.indicator-counter {
	padding: 6rpx 20rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 30rpx;
	backdrop-filter: blur(10rpx);
}

.counter-text {
	font-size: 22rpx;
	color: #ffffff;
	font-weight: 500;
}

/* 无图片占位 */
.no-image {
	width: 100%;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-image-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.no-image-text {
	font-size: 28rpx;
	color: #999999;
	margin-top: 20rpx;
}

/* 分享赚奖励卡片 */
.share-reward-card {
	margin: 20rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	border-radius: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-shadow: 0 8px 16px rgba(255, 107, 107, 0.3);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.share-reward-card:active {
	transform: translateY(-4rpx);
}

.reward-icon-box {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	animation: pulse 2s infinite;
}

.reward-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.reward-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 8rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.reward-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.share-btn {
	padding: 12rpx 24rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	backdrop-filter: blur(10rpx);
	transition: all 0.3s ease;
}

.share-btn:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.4);
}

.share-btn-text {
	font-size: 26rpx;
	color: #ffffff;
	margin-left: 8rpx;
	font-weight: 500;
}

/* 价格区域 */
.price-section {
	margin: 20rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.price-section:active {
	transform: translateY(-2rpx);
}

.price-main {
	display: flex;
	flex-direction: column;
}

.price-current {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	margin-bottom: 10rpx;
}

.price-symbol {
	font-size: 28rpx;
	color: #FF6B6B;
	font-weight: bold;
}

.price-value {
	font-size: 48rpx;
	color: #FF6B6B;
	font-weight: bold;
	margin-left: 4rpx;
	text-shadow: 0 2rpx 4rpx rgba(255, 107, 107, 0.2);
}

.price-unit {
	font-size: 24rpx;
	color: #FF6B6B;
	margin-left: 4rpx;
	font-weight: normal;
}

.price-original {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.original-price {
	font-size: 24rpx;
	color: #999999;
	text-decoration: line-through;
	margin-right: 12rpx;
}

.discount-badge {
	padding: 4rpx 12rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	border-radius: 20rpx;
	animation: bounce 2s infinite;
}

.discount-text {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: bold;
}

.sales-info {
	display: flex;
	align-items: center;
}

.sales-text {
	font-size: 24rpx;
	color: #999999;
}

/* 商品标题 */
.goods-title-section {
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.goods-title-section:active {
	transform: translateY(-2rpx);
}

.goods-title {
	font-size: 32rpx;
	color: #333333;
	line-height: 48rpx;
	font-weight: 500;
}

/* 商品规格 */
.goods-spec-section {
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.goods-spec-section:active {
	transform: translateY(-2rpx);
}

.spec-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.spec-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.spec-value {
	font-size: 28rpx;
	color: #666666;
	margin-left: 12rpx;
	font-weight: 500;
}

/* 服务保障 */
.service-section {
	margin: 0 20rpx 20rpx;
	padding: 24rpx 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.service-section:active {
	transform: translateY(-2rpx);
}

/* 数量选择 */
.quantity-section {
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.quantity-section:active {
	transform: translateY(-2rpx);
}

.quantity-label {
	display: flex;
	align-items: center;
}

.label-text {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.quantity-control {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.quantity-btn {
	width: 60rpx;
	height: 60rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quantity-btn:active {
	transform: scale(0.9);
	background: #f5f5f5;
}

.quantity-btn.disabled {
	background: #f5f5f5;
	border-color: #e0e0e0;
}

.quantity-input {
	width: 100rpx;
	height: 60rpx;
	border-top: 2rpx solid #e0e0e0;
	border-bottom: 2rpx solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -2rpx;
}

.quantity-value {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
}

.service-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 30rpx;
	margin-bottom: 10rpx;
	transition: transform 0.2s ease;
}

.service-item:active {
	transform: scale(0.95);
}

.service-text {
	font-size: 26rpx;
	color: #666666;
	margin-left: 8rpx;
}

/* 商品详情 */
.detail-section {
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.detail-section:active {
	transform: translateY(-2rpx);
}

.section-title {
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.detail-content {
	line-height: 1.8;
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 20rpx;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.action-btns {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.btn-share {
	flex: 1;
	height: 88rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	border-radius: 44rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-share:active {
	transform: scale(0.98);
	box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

.btn-buy {
	flex: 1;
	height: 88rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 44rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-buy:active {
	transform: scale(0.98);
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-text {
	font-size: 30rpx;
	color: #ffffff;
	font-weight: bold;
	margin-left: 8rpx;
}

/* 分享弹窗 */
.share-popup {
	background: #ffffff;
	border-radius: 30rpx 30rpx 0 0;
	padding: 40rpx 30rpx;
}

.popup-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 30rpx;
}

.share-tips {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20rpx;
	background: #FFF5F5;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
}

.tips-text {
	font-size: 26rpx;
	color: #FF6B6B;
	margin-left: 10rpx;
	flex: 1;
}

.share-link-box {
	padding: 24rpx;
	background: #f5f5f5;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
}

.link-label {
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 12rpx;
	display: block;
}

.link-text {
	font-size: 24rpx;
	color: #999999;
	word-break: break-all;
	display: block;
	margin-bottom: 16rpx;
}

.copy-btn {
	padding: 12rpx 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 30rpx;
	align-self: flex-start;
	transition: all 0.3s ease;
}

.copy-btn:active {
	transform: scale(0.95);
}

.copy-text {
	font-size: 26rpx;
	color: #ffffff;
}

.close-btn {
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.close-btn:active {
	transform: scale(0.98);
	background: #eeeeee;
}

.close-text {
	font-size: 30rpx;
	color: #666666;
}

/* 动画定义 */
@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10rpx);
	}
	60% {
		transform: translateY(-5rpx);
	}
}

/* 分享奖励按钮美化 */
.share-tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16rpx 32rpx;
	background: linear-gradient(135deg, #FFF5F5, #FFE8E8);
	border-radius: 50rpx;
	max-width: 100%;
	box-sizing: border-box;
	width: fit-content;
	box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	border: none;
	outline: none;
	cursor: pointer;
	transform: translateY(0);
	font-weight: 600;
	letter-spacing: 1rpx;
	text-align: center;
	justify-content: center;
	min-width: 120rpx;
	height: 60rpx;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	user-select: none;
	-webkit-user-select: none;
	will-change: transform, box-shadow;
	/* 添加现代按钮的细节 */
	border: 2rpx solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5rpx);
}

.share-tag::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: 0.5s;
	z-index: 1;
}

.share-tag::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	pointer-events: none;
	z-index: 1;
	transition: all 0.3s ease;
	/* 添加内发光效果 */
	box-shadow: inset 0 0 10rpx rgba(255, 255, 255, 0.3);
}

.share-tag:hover::before {
	left: 100%;
}

.share-tag:hover::after {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: inset 0 0 20rpx rgba(255, 255, 255, 0.2);
}

.share-tag:active {
	transform: scale(0.96) translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.25);
}

.share-tag:active::after {
	border-color: rgba(255, 255, 255, 0.1);
}

/* 高级分享按钮样式 */
.premium-button {
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.35);
	animation: pulse-glow 2s infinite;
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	background-size: 200% 200%;
	animation: gradientShift 3s ease infinite, pulse-glow 2s infinite;
	transform: translateZ(0); /* 启用硬件加速 */
	position: relative;
	z-index: 2;
	border-radius: 50rpx;
	overflow: hidden;
	/* 添加文字阴影和字体优化 */
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	font-weight: 600;
	letter-spacing: 0.5rpx;
	/* 添加3D效果 */
	transform-style: preserve-3d;
	perspective: 1000px;
	/* 添加现代按钮的细节 */
	backdrop-filter: blur(5rpx);
	-webkit-backdrop-filter: blur(5rpx);
	/* 确保按钮不透明 */
	opacity: 1 !important;
}

.premium-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	z-index: -1;
	border-radius: 50rpx;
}

.premium-button .reward-text {
	color: #ffffff;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 3;
}

.premium-button uni-icons {
	color: #ffffff !important;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.1));
	transition: all 0.2s ease;
	will-change: transform;
	position: relative;
	z-index: 3;
}

.reward-text {
	font-size: 26rpx;
	color: #FF6B6B;
	margin-left: 12rpx;
	font-weight: 600;
	letter-spacing: 0.5rpx;
	z-index: 2;
	position: relative;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* 动画按钮效果 */
.animated-button {
	position: relative;
	overflow: hidden;
	z-index: 1;
	border-radius: 50rpx;
}

.animated-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #FF8E53, #FF6B6B);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50rpx;
}

.animated-button:hover::before {
	opacity: 0.1;
}

.animated-button:active {
	transform: scale(0.96);
	transition: transform 0.2s ease;
}

/* 为 view 元素添加类似的交互效果 */
.animated-button.premium-button:active {
	transform: scale(0.96);
	transition: transform 0.2s ease;
}

/* 悬停效果 */
.animated-button.premium-button:hover {
	opacity: 0.9;
	box-shadow: 0 12rpx 28rpx rgba(255, 107, 107, 0.45);
	transform: translateY(-3rpx);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* 添加悬停时的额外效果 */
	filter: brightness(1.1);
	/* 添加轻微的旋转效果 */
	transform: translateY(-3rpx) rotate(0.5deg);
}

.animated-button.premium-button:hover .reward-text {
	transform: scale(1.05);
	/* 添加文字发光效果 */
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1), 0 0 8rpx rgba(255, 255, 255, 0.4);
}

.animated-button.premium-button:hover uni-icons {
	transform: scale(1.1) rotate(15deg);
	/* 添加图标发光效果 */
	filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 0 6rpx rgba(255, 255, 255, 0.5));
}

/* 焦点状态（适用于键盘导航） */
.animated-button.premium-button:focus {
	outline: none;
	box-shadow: 0 0 0 4rpx rgba(255, 107, 107, 0.3), 0 12rpx 28rpx rgba(255, 107, 107, 0.45);
}

/* 渐变流动动画 */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* 脉冲发光动画 */
@keyframes pulse-glow {
	0% {
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.35), 0 0 10rpx rgba(255, 107, 107, 0.2);
	}
	50% {
		box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.5), 0 0 24rpx rgba(255, 107, 107, 0.3);
	}
	100% {
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.35), 0 0 10rpx rgba(255, 107, 107, 0.2);
	}
}

/* 按钮点击波纹效果 */
.share-tag .ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transform: scale(0);
	animation: ripple 0.6s linear;
	z-index: 0;
}

@keyframes ripple {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
	.share-tag {
		padding: 14rpx 28rpx;
		font-size: 24rpx;
		min-width: 100rpx;
		height: 52rpx;
	}
	
	.reward-text {
		font-size: 24rpx;
	}
	
	.animated-button.premium-button:hover {
		box-shadow: 0 10rpx 24rpx rgba(255, 107, 107, 0.4);
		transform: translateY(-2rpx);
	}
	
	.animated-button.premium-button:hover uni-icons {
		transform: scale(1.08) rotate(12deg);
	}
}

@media screen and (max-width: 480px) {
	.share-tag {
		padding: 12rpx 24rpx;
		font-size: 22rpx;
		min-width: 90rpx;
		height: 48rpx;
	}
	
	.reward-text {
		font-size: 22rpx;
		margin-left: 8rpx;
	}
	
	.animated-button.premium-button:hover uni-icons {
		transform: scale(1.05) rotate(10deg);
	}
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
	.premium-button {
		border: 3rpx solid #fff;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.5);
	}
	
	.share-tag {
		border: 2rpx solid #ccc;
	}
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
	.share-tag,
	.reward-text,
	.premium-button uni-icons,
	.animated-button::before {
		transition: none;
	}
	
	.premium-button {
		animation: none;
	}
	
	.share-tag:hover::before {
		transition: none;
	}
	
	.animated-button.premium-button:hover {
		transform: none;
	}
	
	.animated-button.premium-button:hover .reward-text,
	.animated-button.premium-button:hover uni-icons {
		transform: none;
	}
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
	.share-tag {
		background: linear-gradient(135deg, #3a1c1c, #2e1616);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.3);
	}
	
	.share-tag::after {
		border-color: rgba(255, 255, 255, 0.1);
	}
	
	.share-tag:hover::after {
		border-color: rgba(255, 255, 255, 0.2);
	}
	
	.reward-text {
		color: #FFB6B6;
	}
}

/* 为按钮添加微交互效果 */
.share-tag:active .reward-text {
	transform: scale(0.95);
	/* 添加点击时的文字效果 */
	transition: all 0.1s ease;
}

.share-tag:active uni-icons {
	transform: scale(0.95) rotate(5deg);
	/* 添加点击时的图标效果 */
	transition: all 0.1s ease;
}

/* 添加按钮按下时的内阴影效果 */
.premium-button:active {
	box-shadow: inset 0 4rpx 12rpx rgba(0, 0, 0, 0.2), 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

/* 添加按钮边缘发光效果 */
.premium-button::before {
	content: '';
	position: absolute;
	top: -2rpx;
	left: -2rpx;
	right: -2rpx;
	bottom: -2rpx;
	border-radius: 50rpx;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	z-index: -1;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.premium-button:hover::before {
	opacity: 1;
}

/* 添加按钮内发光效果 */
.premium-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50rpx;
	box-shadow: inset 0 0 20rpx rgba(255, 255, 255, 0.3);
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.premium-button:hover::after {
	opacity: 0.8;
}

/* 添加按钮文字发光效果 */
.premium-button:hover .reward-text {
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1), 0 0 8rpx rgba(255, 255, 255, 0.4);
}

/* 添加按钮图标发光效果 */
.premium-button:hover uni-icons {
	filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.1)) drop-shadow(0 0 6rpx rgba(255, 255, 255, 0.5));
}

/* 添加按钮微动效 */
.premium-button {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-button:hover {
	transform: translateY(-2rpx);
}

/* 添加按钮3D效果 */
.premium-button {
	transform-style: preserve-3d;
	perspective: 1000px;
}

.premium-button:hover {
	transform: translateY(-2rpx) translateZ(5px);
	box-shadow: 0 12rpx 30rpx rgba(255, 107, 107, 0.5);
}

/* 添加按钮按下时的缩放效果 */
.premium-button:active {
	transform: scale(0.96) translateY(-1rpx);
}

/* 添加按钮焦点状态 */
.premium-button:focus {
	outline: none;
	box-shadow: 0 0 0 4rpx rgba(255, 107, 107, 0.3), 0 12rpx 28rpx rgba(255, 107, 107, 0.45);
}
